<template>
  <div class="store-detail" v-if="store">
    <el-card>
      <template #header>
        <span>{{ store.storeName }}</span>
      </template>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="门店编号">{{ store.storeCode }}</el-descriptions-item>
        <el-descriptions-item label="地址">{{ store.address }}</el-descriptions-item>
        <el-descriptions-item label="电话">{{ store.phone }}</el-descriptions-item>
        <el-descriptions-item label="开业时间">{{ store.createdAt }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
  <div v-else class="empty">
    <el-empty description="请先选择门店" />
    <el-button type="primary" @click="$router.push('/customer/select-store')">
      去选门店
    </el-button>
  </div>
</template>

<script setup lang="ts">
import { useCustomerStore } from '@/stores/customer'
import { computed } from 'vue'

const customerStore = useCustomerStore()
const store = computed(() => customerStore.store)
</script>

<style scoped>
.store-detail {
  padding: 16px;
}
.empty {
  text-align: center;
  margin-top: 40px;
}
</style>